<template>
  <div class="time_select">
    <el-time-select
      :style="{width: inputWidth+'px'}"
      ref="timeselect_start"
      placeholder="起始时间"
      v-model="formdata.beginTime"
      :picker-options="startTimePickerOption"
      @change="timeSelectChange"
    >
    </el-time-select> <el-time-select
      :style="{width: inputWidth+'px'}"
      ref="timeselect_end"
      placeholder="结束时间"
      v-model="formdata.endTime"
      :picker-options="endTimePickerOption"
      @change="timeSelectChange"
    >
    </el-time-select>
  </div>
</template>

<script>
import { isNull } from '@/utils/utils'
export default {
  name: 'TimeSelect',
  props: {
    timeVal: {
      type: String || Object,
      default: ''
    },
    inputWidth: {
      type: String,
      default: '103'
    },
    typeStr: {
      type: String,
      default: '-'
    }
  },
  data() {
    return {
      stepTime: window.g.DEFAULTSTEPTIME || '00:30',
      startTime: '00:00',
      endTime: '24:00',
      formdata: {
        beginTime: '',
        endTime: ''
      }
    }
  },
  watch: {
    timeVal: {
      handler(val) {
        this.initTime(val)
      },
      immediate: true
    }
  },
  computed: {
    startTimePickerOption() {
      return {
        start: this.startTime,
        step: this.stepTime,
        end: this.endTime,
        maxTime: this.formdata.endTime
      }
    },
    endTimePickerOption() {
      return {
        start: this.startTime,
        step: this.stepTime,
        end: this.endTime,
        minTime: this.formdata.beginTime
      }
    }
  },
  methods: {
    initTime(val) {
      if (!val) return
      const ta = typeof val === 'object' ? val : val.split(this.typeStr)
      this.formdata.beginTime = ta[0] ? ta[0] : ''
      this.formdata.endTime = ta[1] ? ta[1] : ''
    },
    timeSelectChange(val) {
      if (isNull(val)) {
        this.$message.warning('该值不能为空')
      }
      // console.log('timeSelectChange=>val', val)
      let time = ''
      // console.log('typeof val', typeof val)
      // console.log('this.formdata.endTime', this.formdata.endTime)
      if (val && typeof val === 'object') {
        time = [this.formdata.beginTime || '', this.formdata.endTime || '']
      } else {
        // console.log('result-time', `${this.formdata.beginTime || ''}${this.typeStr}${this.formdata.endTime || ''}`)
        time = `${this.formdata.beginTime || ''}${this.typeStr}${this.formdata.endTime || ''}`
      }
      // console.log('time', time)
      this.emitInput(time)
    },
    emitInput(val) {
      this.$emit('input', val)
    }
  }
}
</script>

<style lang="scss" scoped>
.time_select{
  display: inline-block;
  /deep/ .el-input__icon{
    line-height: 36px;
  }
  /deep/ .el-on-circle-close{
    line-height: 42px;
  }
}
</style>
